<template>
	<view class="list-card">
		<view class="left-box">
		<view class="title-box">
			<view class="title">
				{{item.projectName}}
			</view>
			<view class="status">
				进行中
			</view>
		</view>
		<view class="tag-box">
			<view class="tag">
				负责人：{{item.leader.userName}}
			</view>
			<view class="tag">
				起止时间：{{item.startTime}}-{{item.endTime}}
			</view>
		</view>
		</view>
		<view class="right-box">
			<uni-echarts
			  class="ec-canvas"
			  id="chart-pie"
			  ref="canvas-pie"
			  canvas-id="chart-pie"
			  :ec="pie"
			></uni-echarts>
		</view>
	</view>
</template>

<script>
	import uniEcharts from '@/components/uni-echarts/uni-echarts';
	export default {
		props:{
			info:{
				type:Object,
				default:{},
			}
		},
		components:{
			uniEcharts
		},
		data() {
			return {
				item:{},
				pie: {
				  option:{
					color:['#409eff','#e8e8e8'],
				    tooltip: {
						show:false,
						trigger: 'item'
				    },
				    legend: {
				      top: 'center',
				      right: 0,
					  width:'100%',
					  height:'100%',
					  selectedMode: false,
					  show:false,
				    },
					grid:{
						width:'100%',
						height:'100%',
					},
				    series: [
						{
							hoverAnimation: false,
							selectedOffset:0,
							name: '',
							type: 'pie',
							radius: ['50%', '80%'],
							avoidLabelOverlap: false,
							stillShowZeroSum:false,
							label:{
								show: true,
								position: 'center',
								formatter: '',
								textStyle: {
									color: 'black',
									fontSize: 12,
								},
								rich: {
									center: {
									    align: 'center',
									    fontSize: 12,
										color: 'black',
									    fontWeight: 'bolder'
									}
								}
							},
							labelLine:{
								show: false,
							},
							emptyCircleStyle:{
								color:'#e8e8e8'
							},
							data:[]
						}
					]
				  }
				}
			}
		},
		mounted(){
			let that = this;
			let info = this.info;
			if(info.startTime){
				info.startTime = info.startTime.substring(0,info.startTime.length - 3);
				info.startTime = info.startTime.replace(/-/g,'.');
			}
			if(info.endTime){
				info.endTime = info.endTime.substring(0,info.endTime.length - 3);
				info.endTime = info.endTime.replace(/-/g,'.');
			}
			this.item = this.info;
				setTimeout(() => {
					that.reloadEchart();
				},500);
		},
		methods: {
			reloadEchart(){
				let that = this;
				let info = that.item;
				let optionData = that.pie.option;
				// that.taskoptions.option.series[0].label.formatter = ['全部任务数',res.data.result.totalTaskCount.countTotal].join('\n');
				that.$set(optionData.series[0].label,'formatter','{center|' + info.progress + '%}');
				that.$set(optionData.series[0],'data',[{value:parseFloat(info.progress) == 0 ? 0.01 : info.progress,name: ''},{value:100 - parseFloat(info.progress),name: '',}]);
				console.log(optionData);
				that.pie.option = optionData;
				that.$refs['canvas-pie'].updateOption(optionData)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.ec-canvas {
	  width: 100%;
	  height: 100%;
	  display: block;
	}
	.list-card{
		background-color: white;
		padding:15rpx 10rpx;
		box-sizing: border-box;
		position:relative;
		overflow: hidden;
		min-height: 150rpx;
		margin-bottom: 20rpx;
		.left-box{
		.title-box{
			display: flex;
			.title{
				font-size: 30rpx;
				line-height: 40rpx;
				height: 40rpx;
				font-weight: bold;
			}
			.status{
				color: #409eff;
				padding:0 10rpx;
				height: 40rpx;
				line-height: 40rpx;
				border-radius: 14rpx;
				border:1px solid #409eff;
				margin-left:10rpx;
				font-size: 24rpx;
				background-color: rgba(236,245,255,0.5);
				}
			}
			.tag-box{
				display: flex;
				margin-top: 20rpx;
			}
			.tag{
				background-color: #f6f6f6;
				font-size:20rpx;
				width: fit-content;
				margin-right: 10rpx;
				padding: 0 10rpx;
				line-height:40rpx;
				border-radius: 10rpx;
			}
		}
		.right-box{
			position: absolute;
			right:0rpx;
			top:0rpx;
			width:150rpx;
			height:150rpx;
		}
	}
</style>
